/**
 * 全局自定义hooks函数（来源 react hooks），拆分优化组合式 api 代码(js)：
 * 1. 定义一个函数，名字要求以 use开头=》useXxx
 * 2. 函数体内放要拆分的逻辑代码（组合式 api 代码）
 * 3. == 返回要提供的数据和方法 ==
 * 优点：
 * 1. 提高代码的可维护性
 * 2. 提高代码的可复用性
 */
import {
	onMounted,
	ref
} from 'vue'
/**
 * == 技巧：不同的部分设计成参数传入 ==
 * listApi 请求的 api 函数
 * type 接口请求参数的类型
 */
export const useList = (listApi, type) => {
	// == 数据查询渲染 ==
	// 1. 任务通知变量
	const list = ref([])
	// 是否还有更多数据：true 还有数据 ｜ false  没有数据了
	const hasMore = ref(true)
	// 2.  获取任务列表数据
	// 分页请求的参数
	const params = {
		page: 1, // 页码
		pageSize: 10, // 每页条数
	}
	const getList = async () => {
		const {
			data
		} = await listApi(type, params.page, params.pageSize)
		console.log('任务列表：', data);
		//  说明：后续要实现上拉加载更多（ 分页），不能=号赋值=》应该追加
		// list.value = data.items
		list.value.push(...data.items)

		// 判断是否有更多数据
		if (parseInt(data.counts) === list.value.length) {
			//  没有更多数据了
			hasMore.value = false
		}

	}
	// onMounted(() => {
	// 	console.log('任务通知挂载了');
	getList()
	// })

	/**
	 * == 上拉分页实现：==
	 * 1. 判断是否滚动到列表的底部(关键点)
	 * 2. 到底部=》
	 *    2.1 判断有更多数据=》页码+1=>请求下一页数据
	 *    2.2 判断没有更多数据=》变量hasMore=》修改为 false
	 */
	const goBottom = () => {
		// console.log('到底部了');
		if (hasMore.value === false) return
		params.page++
		getList()
	}

	// ==  下拉刷新 == 
	// 控制下拉刷新loading效果的显示和隐藏:true显示 ｜ false 关闭
	const isTriggered = ref(false)
	const refresh = async () => {
		isTriggered.value = true
		console.log('开始刷新');
		/**
		 * 下拉刷新步骤：重新获取最新的任务列表数据（核心）
		 * 1. 重置操作？
		 *   1.1 页码重置为 1
		 *   1.2 列表数据重置为[]空数组
		 *   1.3 hasMore 重置为 true
		 * 		
		 * 2. 重新发请求(刷新列表)
		 */
		params.page = 1
		list.value = []
		hasMore.value = true
		await getList()
		isTriggered.value = false
	}

	//  对外暴漏数据和方法
	return {
		list,
		hasMore,
		goBottom,
		isTriggered,
		refresh
	}

}